<script setup lang="ts">
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import {reactive} from 'vue';

const appStore = useAppStore();
const themeStore = useThemeStore();
const state = reactive({
  theme: 'light',
  themeOption: [
    { label : '深色', value: 'dark' },
    { label : '浅色', value: 'light'}
  ]
})
const completeColor = (value) => {
  themeStore.updateThemeColors(value);
};
const changeTheme = value => {
  console.log(value);
  themeStore.setThemeScheme(value);
};
</script>

<template>
  <div class="home-container">
    {{$t('system.title')}}
    <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
    <n-date-picker panel type="date" />
    <div class="w-200px">
      <n-select v-model:value="state.theme" @change="changeTheme" :options="state.themeOption"/>
    </div>
    <div class="test">
      test
      <icon-local-activity />
    </div>
    <n-button type="primary">按钮</n-button>
    <n-color-picker :on-complete="completeColor" :modes="['hex']" />
  </div>
</template>

<style scoped lang="scss">
  .home-container{
    .test{
      color: #f00;
    }
  }
</style>
